<template>
  <div>
    <el-popover v-model="showSearchPopover" placement="bottom" width="400" trigger="click">
      <el-tree :data="optionsTree" highlight-current @node-click="searchNodeClick"></el-tree>
      <el-input slot="reference" v-model="formInline.departmentName" :suffix-icon="showSearchPopover?'el-icon-arrow-up':'el-icon-arrow-down'" class="a_input" readonly placeholder="所属部门"></el-input>
    </el-popover>
  </div>
</template>
<script>
import { GETORGANIZATIONTREE } from "@/http/system";
export default {
  name: "DepartMent",
  props: {
    value: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      optionsTree: [],
      formInline: {},
      showSearchPopover: false,
    };
  },
  watch: {
    value: {
      handler: function (n, o) {
        if (!n) {
          this.formInline = {};
        }
      },
      immediate: true,
    },
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取城市
    getList() {
      GETORGANIZATIONTREE().then((res) => {
        let list = res.data || [];
        this.optionsTree = list[0] ? list[0].children : [];
      });
    },

    // 监听树节点点击
    searchNodeClick(data) {
      this.formInline.departmentId = data.id;
      this.formInline.departmentName = data.label;
      this.showSearchPopover = false;
      this.$emit("input", data.id);
      this.$emit("change", data);
    },

    // 监听组件变化
    onChange(e) {
      console.log(e);
      this.$emit("input", e.toString());
      this.$emit("change", e.toString());
    },
  },
};
</script>
<style lang="scss" scoped>
</style>